<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置项UI预览</title>
    <style>
      body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:#f7f7f7; padding:24px; }
      .section { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.06); padding:12px; margin-bottom:12px; }
      .title { font-weight:600; margin-bottom:8px; }
      .row { display:flex; align-items:center; gap:8px; }
      .input { flex:1; height:40px; border:1px solid #ddd; border-radius:8px; padding:0 10px; font-size:14px; }
      .unit { color:#666; font-size:14px; }
      .hint { color:#999; font-size:12px; margin-top:6px; }
      .add-btn { margin-top:8px; font-size:13px; }
    </style>
  </head>
  <body>
    <h2>设置项UI预览（示例模拟）</h2>
    <p style="color:#666;">支持两种结构：上下（默认）与左右（inlineTitle）。以下为示例。</p>

    <div class="section">
      <div class="title">关键字（左右结构）</div>
      <div class="row">
        <span style="min-width:80px; font-weight:600;">关键字</span>
        <input class="input" placeholder="请输入关键字" />
      </div>
      <div class="hint">inlineTitle：标题与输入框左右排列</div>
    </div>

    <div class="section">
      <div class="title">浏览时长（左右结构）</div>
      <div class="row">
        <span style="min-width:80px; font-weight:600;">浏览时长</span>
        <input class="input" placeholder="单位：秒（整数）" />
        <span class="unit">秒</span>
      </div>
      <div class="hint">显示单位：秒；inlineTitle：左右排列</div>
    </div>

    <div class="section">
      <div class="title">点赞概率（左右结构）</div>
      <div class="row">
        <span style="min-width:80px; font-weight:600;">点赞概率</span>
        <input class="input" placeholder="范围 0-100，单位：%" />
        <span class="unit">%</span>
      </div>
      <div class="hint">显示单位：%；inlineTitle：左右排列</div>
    </div>

    <div class="section">
      <div class="title">评论概率（左右结构）</div>
      <div class="row">
        <span style="min-width:80px; font-weight:600;">评论概率</span>
        <input class="input" placeholder="范围 0-100，单位：%" />
        <span class="unit">%</span>
      </div>
      <div class="hint">显示单位：%；inlineTitle：左右排列</div>
    </div>

    <div class="section">
      <div class="title">评论内容（可多项）</div>
      <div class="row" style="margin-bottom:6px;">
        <input class="input" placeholder="请输入评论内容" />
      </div>
      <div class="row" style="margin-bottom:6px;">
        <input class="input" placeholder="请输入评论内容" />
      </div>
      <button class="add-btn">+ 添加一项</button>
      <div class="hint">列表模式示例，保留边框样式与间距</div>
    </div>
  </body>
  </html>